import 'dart:async';

import 'package:enjoy_plus_ohos/utils/eventBus.dart';
import 'package:enjoy_plus_ohos/utils/http.dart';
import 'package:enjoy_plus_ohos/utils/toast.dart';
import 'package:enjoy_plus_ohos/utils/token.dart';
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  /**
   * 1. 定义状态变量+倒计时时间
   * 2. 点击按钮开始倒计时
   * 3. 倒计时过程中修改 UI 显示
   * 4. 组件销毁时清除定时器
   * */
  // 倒计时时间
  int _countdown = 60;
  // 是否正在倒计时
  bool _isCountdown = false;

  Timer? _timer;
  // 倒计时开始逻辑
  void _startCountdown() {
    if (_isCountdown) return;
    _isCountdown = true;
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      print('倒计时中');
      setState(() {
        if (_countdown > 0) {
          _countdown--;
        } else {
          _isCountdown = false;
          timer.cancel();
        }
      });
    });
  }

  // 组件销毁时 清除定时器
  @override
  void dispose() {
    super.dispose();
    _timer?.cancel();
  }

  // 获取手机号 和验证码相关
  // 1.创建控制器用来获取 用户名 和 验证码的值
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _codeController = TextEditingController();

  _submit() async {
    // 1.手机号的非空校验
    if (_usernameController.text.isEmpty) {
      ToastUtil.showError('手机号不能为空');
      return;
    }
    // 2.手机号的格式校验
    final RegExp phoneRegExp = RegExp(r'^1[3-9]\d{9}$');
    if (!phoneRegExp.hasMatch(_usernameController.text)) {
      ToastUtil.showError('手机号格式不正确');
      return;
    }
    // 3.验证码的非空校验
    if (_codeController.text.isEmpty) {
      ToastUtil.showError('验证码不能为空');
      return;
    }
    // 4.验证码的格式校验 6位数字
    final RegExp codeRegExp = RegExp(r'^\d{6}$');
    if (!codeRegExp.hasMatch(_codeController.text)) {
      ToastUtil.showError('验证码格式不正确');
      return;
    }
    // 5.调用接口登录 post请求，地址为：/login，请求体为：{mobile: 手机号, code: 验证码}
    final res = await http.post('/login', {
      'mobile': _usernameController.text,
      'code': _codeController.text,
    });
    // 6.提示用户
    ToastUtil.showSuccess(res['message']);
    // 7.保存 token
    TokenManager().saveToken(res['data']['token']);

    eventBus.fire(RefreshMine());

    // 8.返回上一页
    Navigator.pop(context);
  }

  // 获取验证码
  _getCode() async {
    // 1.手机号是否为空，为空提示用户并阻断代码执行
    if (_usernameController.text.isEmpty) {
      ToastUtil.showError('手机号不能为空');
      return;
    }
    // 2.手机号格式是否正确（正则表达式）
    // 手机号正则表达式
    final RegExp phoneRegExp = RegExp(r'^1[3-9]\d{9}$');
    if (!phoneRegExp.hasMatch(_usernameController.text)) {
      ToastUtil.showError('手机号格式不正确');
      return;
    }
    // 3.调用接口获取验证码 get请求，地址为：/code，查询参数 mobile
    final res = await http.get(
      '/code',
      params: {'mobile': _usernameController.text},
    );
    _codeController.text = res['data']['code'];
    // 4.开启倒计时
    _startCountdown();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('登录'),
        backgroundColor: Colors.transparent,
        centerTitle: true,
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const Row(
              children: [
                Text(
                  '登录',
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                ),
              ],
            ),
            const SizedBox(height: 10),
            const Row(
              children: [Text('加入享+, 让生活更轻松', style: TextStyle(fontSize: 15))],
            ),
            const SizedBox(height: 30),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: TextField(
                    // 2.绑定给输入框
                    controller: _usernameController,
                    decoration: InputDecoration(
                      labelText: '手机号',
                      hintText: '请输入手机号',
                    ),
                  ),
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    shadowColor: Colors.transparent,
                    foregroundColor: const Color.fromARGB(255, 85, 145, 175),
                    minimumSize: const Size(100, 50),
                  ),
                  onPressed: () {
                    _getCode();
                  },
                  child: Text(_isCountdown ? '$_countdown秒再次获取' : '获取验证码'),
                ),
              ],
            ),
            const SizedBox(height: 8),
            TextField(
              // 2.绑定给输入框
              controller: _codeController,
              decoration: InputDecoration(
                labelText: '验证码',
                hintText: '请输入6位验证码',
              ),
            ),
            const SizedBox(height: 8),
            const Row(
              children: [
                Text(
                  '未注册手机号经验证后将自动登录',
                  style: TextStyle(fontSize: 12, color: Colors.grey),
                ),
              ],
            ),
            const SizedBox(height: 50),
            Row(
              children: [
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color.fromARGB(255, 85, 145, 175),
                      minimumSize: const Size(100, 50),
                    ),
                    onPressed: () {
                      _submit();
                    },
                    child: const Text(
                      '登录',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
